<template>
  <div class="home_box">
    <v-header />
    <div class="content-box">
      <v-sidebar />
      <div class="content_right" :style="{ width: useStore.collapse ? '200px' : '65px' }">
        <v-tags style="height: 30px"></v-tags>
        <div class="content">
          <router-view v-slot="{ Component }">
            <transition name="move" mode="out-in">
              <keep-alive :include="includeList">
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import vHeader from "@/layout/Header/index.vue";
import vSidebar from "@/layout/Sidebar/Sidebar.vue";
import vTags from "@/layout/Tags.vue";
const router = useRouter();
const useStore = useAllStore();
const includeList = ref<string[]>([]);
router.getRoutes().map((routeItem) => {
  if (routeItem.meta.keepAlive && routeItem.name) includeList.value.push(routeItem.name as string);
});
</script>
<style scoped lang="scss">
.home_box {
  .content-box {
    height: calc(100vh - 50px);
    background: #f0f0f0;
    display: flex;
    .content_right {
      flex: 1;
      height: 100%;
      -webkit-transition: width 0.3s ease-in-out;
      transition: width 0.3s ease-in-out;
      .content {
        padding: 10px;
        flex: 1;
        height: calc(100% - 30px);
        .move-enter-active,
        .move-leave-active {
          transition: opacity .5s ease;
        }
        .move-enter-from,
        .move-leave-to {
          opacity: 0;
        }
      }
    }
  }
}
</style>
